const tbody = document.querySelector("tbody"); //获取tbody表格dom元素
const showModalBtn = document.querySelector(".show-modal-btn"); //获取添加学员按钮的dom元素
const provinceDom = document.querySelector("[name=province]"); //获取省份下拉列表的dom元素
const cityDom = document.querySelector("[name=city]"); //获取市份下拉列表的dom元素
const countyDom = document.querySelector("[name=county]"); //获取县份下拉列表的dom元素
const addForm = document.querySelector(".add-form"); //获取form表单的dom元素
const addModalLabel = document.querySelector("#addModalLabel"); //获取模态框标题的don元素
//创建一个打开页面做初始化工作的函数 优化业务简约代码
function init() {
  //调用获取学员资料的函数 渲染到页面上
  getStudentList();
  //调用获取省份的函数
  getProvince();
  //为省份下拉框创建change事件 值发生改变触发使市份对应上
  provinceDom.addEventListener("change", function () {
    //调用获取市份的函数
    getCity(provinceDom.value);
  });
  //为市份下拉框创建change事件 值发生改变触发使县份对应上
  cityDom.addEventListener("change", function () {
    //调用获取县份的函数
    getCounty(provinceDom.value, cityDom.value);
  });
}
//调用函数
init();
//创建获取学员资料的函数
async function getStudentList() {
  const result = await axios({ url: "/student/list" }); //声明result等于获取的数据
  // console.log(result);
  const list = result.data.data; //声明list等于学员的个人信息
  const html = list.reduce((prve, item) => {
    //声明html=遍历获取到后端数据 对号入座填好上标签上
    const {
      id,
      name,
      age,
      sex,
      group,
      phone,
      salary,
      truesalary,
      province,
      city,
      county,
    } = item;

    return (
      prve +
      `
            <tr>
        <th scope="row">${id}</th>
        <td>${name}</td>
        <td>${age}</td>
        <td>${sex}</td>
        <td>${group}</td>
        <td>${phone}</td>
        <td>${salary}</td>
        <td>${truesalary}</td>
        <td>${province + city + county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm btn-update" data-id="${id}">修改</button>
          <button type="button" class="btn btn-danger btn-sm btn-del" data-id="${id}">删除</button>
        </td>
      </tr>
            `
    );
  }, "");
  tbody.innerHTML = html; //表格的结构等于html html如上
}

//为添加学员按钮创建点击事件 点击显示模态框
showModalBtn.addEventListener("click", function (e) {
  $("#addModal").modal("show"); //点击显示模态框 html模态框的id是#addModal 已经绑定好
  addModalLabel.innerText = "新增学员信息"; //修改模态框标题文本
});

//为form表单创建提交事件
addForm.addEventListener("submit", async function (e) {
  //阻止默认事件 防止还没提交就被刷新掉数据
  e.preventDefault();
  //使用form-serialize插件获取在form表单填写的数据
  const data = serialize(addForm, { hash: true, empty: true });
  //声明一个result为下面业务局部共用
  let result;
  //判断模态框标题的文本是新增学员还是修改学员
  if (addModalLabel.innerText === "新增学员信息") {
    //删除id数据
    delete data.id;
    //发送增加请求 完成增加学员的资料提交
    result = await axios({ url: "/student/add", method: "post", data });
    // console.log(result);
  } else {
    // 发送修改请求 完成修改学员的数据修改
    result = await axios({ url: "/student/update", method: "put", data });
  }
  //判断提交成功返回的code是不是0
  if (result.data.code === 0) {
    //提示框
    toastr.success("操作成功");
    // 重置表单
    addForm.reset();
    //关闭模态框 html模态框的id是#addModal 已经绑定好
    $("#addModal").modal("hide");
    //重新渲染页面
    getStudentList();
  }
});

//为tbody表格创建点击事件 利用委托事件对修改学员按钮和删除学员按钮进行业务
tbody.addEventListener("click", async function (e) {
  //判断当前点击的是否带有类名btn-update的修改按钮
  if (e.target.classList.contains("btn-update")) {
    //显示模态框
    $("#addModal").modal("show");
    //修改模态框标题文本
    addModalLabel.innerText = "修改学员信息";
    //获取到当前需要修改的学员id（后端数据库的id）
    const id = e.target.dataset.id;
    // console.log(id);
    //根据获取的id发送请求到后端 拿到该学员的旧数据
    const result = await axios({ url: "/student/one", params: { id } });
    // console.log(result);
    const data = result.data.data; //拿到旧数据
    //把旧数据回填到模态框上 用foreach遍历统一实现-性别需要单独处理

    await getCity(data.province); //异步函数 调用市份函数
    await getCounty(data.province, data.city); //调用县份函数
    //声明一个数组拿到form表单的说有带有name属性的dom元素
    const nameDomList = addForm.querySelectorAll("[name]");
    //foreach遍历数组
    nameDomList.forEach((dom) => {
      //判断name不等于sex 去除性别的dom元素 性别要单独处理
      if (dom.name !== "sex") {
        addForm.querySelector(`[name=${dom.name}]`).value = data[dom.name];
      }
    });
    // //旧写法
    // addForm.querySelector(`[name=sex][value=${data.sex}]`).checked = true;

    // addForm.querySelector(`[name=name]`).value = data.name;
    // addForm.querySelector(`[name=age]`).value = data.age;
    // addForm.querySelector(`[name=group]`).value = data.group;
    // addForm.querySelector(`[name=phone]`).value = data.phone;
    // addForm.querySelector(`[name=salary]`).value = data.salary;
    // addForm.querySelector(`[name=truesalary]`).value = data.truesalary;
    // // 处理性别 单选框 checked  女
    // addForm.querySelector(`[name=sex][value=${data.sex}]`).checked = true;
    // // == 籍贯还没有处理！！
    // addForm.querySelector(`[name=province]`).value = data.province;
    // // 设置select标签选中，先有对应的option标签，然后再去设置 value属性 选中

    // // 动态的设置 城市对应的option
    // await getCity(data.province); // 异步
    // addForm.querySelector(`[name=city]`).value = data.city;

    // await getCounty(data.province, data.city);

    // addForm.querySelector(`[name=county]`).value = data.county;
  }
  //当前点击的是否带有类名btn-del的删除按钮
  if (e.target.classList.contains("btn-del")) {
    //获取到当前需要修改的学员id（后端数据库的id）
    const id = e.target.dataset.id;
    //根据获取的id发送请求到后端
    const result = await axios({
      url: "/student/delete",
      method: "delete",
      params: { id },
    });
    //重新渲染页面
    getStudentList();
  }
});

//创建获取省份的函数
async function getProvince() {
  //声明result等于省份的数据
  const result = await axios({ url: "/geo/province" });
  //把获取的省份遍历插入到html上
  provinceDom.innerHTML = result.data.reduce(
    (prev, item) => prev + `<option value="${item}">${item}</option>`,
    //给下拉框加上默认值
    "<option value='' >--省--</option>"
  );
}

//创建获取市份的函数
async function getCity(pname) {
  //声明result等于市份的数据
  const result = await axios({
    url: "/geo/city",
    params: { pname }, //获取市份必传参数省份
  });

  //把获取的市份遍历插入到html上
  cityDom.innerHTML = result.data.reduce(
    (prev, item) => prev + `<option value="${item}">${item}</option>`,
    //给下拉框加上默认值
    "<option value='' >--市--</option>"
  );
  //值发生改变县下拉框变回默认值
  countyDom.innerHTML = "<option value='' >--县--</option>";
}

//创建获取县份的函数
async function getCounty(pname, cname) {
  //声明result等于县份的数据
  const result = await axios({
    url: "/geo/county",
    params: { pname, cname }, //获取县份必传参数省份和市份
  });
  //把获取的县份遍历插入到html上
  countyDom.innerHTML = result.data.reduce(
    (prev, item) => prev + `<option value="${item}">${item}</option>`,
    //给下拉框加上默认值
    "<option value='' >--县--</option>"
  );
}
